import {ActionSheet, Tag} from "@taroify/core";
import { ConservationRes } from "@/types/conservationType";
import {  View } from "@tarojs/components";
import {CSSProperties, useState} from "react";
import {Bars} from "@taroify/icons";
import Taro from "@tarojs/taro";
import {useDispatchConservation} from "@/hooks/conservation";

interface IndexProps {
  conservation: ConservationRes;
}

export default function Index(props: IndexProps) {
  const { conservation } = props;
  const dispatchConservation = useDispatchConservation();

  const containerStyle: CSSProperties = {
    width: "100%",
    height: "100%",
    padding: '15rpx 20rpx 15rpx 20rpx',
    boxSizing: "border-box",
    borderBottom: '1px solid #f0f2f5',
  };

  const contentStyle: CSSProperties = {
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: 'space-between',
  };

  const titleStyle: CSSProperties = {
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    marginRight: "10rpx",
    paddingBottom: '15rpx'
  };

  const infoStyle: CSSProperties = {
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    marginRight: "10rpx",
    color: "gray",
    fontSize: "25rpx",
  };

  const [conservationSheetVisible, setConservationSheetVisible] = useState(false);


  const handleConservationSheetClick = (event: { value: string; }) => {
    if (event.value === 'clean') {
      // 处理删除操作
      dispatchConservation.updateConservationInfo(conservation.uuid , {chat_history: [], long_memory: '', short_memory: ''})

    } else if (event.value === 'delete') {
      dispatchConservation.removeConservation(conservation.uuid)
    }
    setConservationSheetVisible(false);
  };

  const handleConservationOpen = async (uuid: string) => {
    await Taro.navigateTo({
      url: `/pages/agentConservation/index?uuid=${uuid}`,
    });
  };

  return (
    <View style={containerStyle}>
      <View style={contentStyle}>
        {/* 信息 */}
        <View
          style={{ width: 'calc( 100% - 100rpx)', display: "flex", flexDirection: "column"}}
          onClick={() => handleConservationOpen(conservation.uuid)}
        >
          <View style={{height: '100%'}}>
            <View style={titleStyle}>{conservation.name}</View>
            <View style={infoStyle} >
              <Tag style={{ backgroundColor: '#f0f0f0', color: '#666', fontSize: '25rpx' }}>
                {conservation.updated_time? conservation.updated_time.split('T')[0] :
                  conservation.created_time.split('T')[0]
                }
              </Tag>
            </View>
          </View>
        </View>

        {/* 复选框 */}
        <View style={{display: "flex", color: 'gray'}}>
          <Bars onClick={() => setConservationSheetVisible(true)} />
        </View>
      </View>

      <ActionSheet
        open={conservationSheetVisible}
        cancelText='取消'
        onClose={() => setConservationSheetVisible(false)}
        onSelect={handleConservationSheetClick}
        onCancel={() => setConservationSheetVisible(false)}
        actions={[
          { name: '清除上下文', value: 'clean', style:{ color: '#1890ff'} },
          { name: '删除', value: 'delete', style:{ color: '#ff4d4f'} },
        ]}
      />
    </View>
  );
}
